<template>
  <div class="g-page-container">
    <PageHeader title="线索商机转换率" />
    <div class="g-content-container">
      <SearchForm
        ref="form"
        @search="getList"
        @down-table-list="downTableList"
      />
      <p-table
        class="table-list-container"
        row-key="id"
        :data-source="dataSource"
        :columns="columns"
        bordered
        :scroll="{ y: 400 }"
        :pagination="paginationMixin"
        :loading="load"
        @change="handleTableChange"
      />
    </div>
  </div>
</template>

<script>
import SearchForm from './components/SearchForm.vue';
import mixinTable from '@/mixins/mixin-table.js';
import { downloadFile } from '@/utils/index.js';
import { postTableList, postExportList } from '@/api/clueBusinessRate.js';

export default {
  components: {
    SearchForm,
  },
  mixins: [mixinTable],
  data() {
    return {
      dataSource: [],
      load: false,
    };
  },

  computed: {
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '销售组织',
          dataIndex: 'salesOrgName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '部门',
          dataIndex: 'groupName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建线索数',
          dataIndex: 'createCount',
          // customRender: (text) => this.stateOptions[text],
          ellipsis: true,
        },
        {
          align: 'center',
          title: '有效线索数',
          dataIndex: 'validCount',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '有效线索率',
          dataIndex: 'validLeadsRatio',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '线索商机转换数',
          dataIndex: 'bizCount',
          // customRender: (text) => this.appOptions[text],

          ellipsis: true,
        },
        {
          align: 'center',
          title: '线索商机转换率',
          dataIndex: 'validBizRatio',
          // customRender: (text) => this.appOptions[text],
          ellipsis: true,
        },
      ];
      return columns;
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    async downTableList() {
      const form = this.$refs.form.form;
      const result = await postExportList(form);
      await downloadFile(result.data, '线索商机转换率导出列表.xlsx');
    },
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      this.paginationMixin = page;
      this.getList(false);
    },
    async getList(value) {
      if (value) {
        this.paginationMixin.current = 1;
        this.paginationMixin.pageSize = 10;
      }
      const form = this.$refs.form.form;
      const data = {
        ...form,
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
      };
      this.load = true;
      const result = await postTableList(data).finally(() => {
        this.load = false;
      });
      this.dataSource = result?.data?.data?.records;
      this.paginationMixin.total = result?.data?.data?.total;
    },
  },
};
</script>
<style lang="less" scoped>
.table-list-container {
  margin-top: 20px;
}
</style>

